import React, { useState, useEffect } from 'react';
import { Table, Image, Space, Button, Popconfirm, Tooltip, Switch } from 'antd';
import { getProList, getCategory, updateFlag } from '../../api/product';

function Index() {
  const [proList, setProList] = useState([]);
  const [categoryList, setCategoryList] = useState([]);

  useEffect(() => {
    // 该项目共有150，测试Table组件的自动分页，写了 200
    getProList({ limitNum: 200 }).then((res) => {
      setProList(res.data.data);
    });

    // 获取分类的数据
    getCategory().then((res) => {
      const arr = [];
      res.data.data.forEach((item) => {
        // 处理分类数据
        arr.push({ text: item, value: item });
      });
      setCategoryList(arr);
    });
  }, []);

  // 修改推荐状态
  const changeRecommendFlag = (proid, text) => {
    updateFlag({ proid, type: 'isrecommend', flag: text === 1 ? false : true }).then(() => {
      // 重新获取数据
      getProList({ limitNum: 200 }).then((res) => {
        setProList(res.data.data);
      });
    });
  };

  // 修改秒杀状态
  const changeSeckillFlag = (proid, text) => {
    // text 拿到的上一次的状态，如果上一次的值为1， 代表用户点击完后要变为0
    updateFlag({ proid, type: 'isseckill', flag: text === 1 ? false : true }).then(() => {
      // 重新获取数据
      getProList({ limitNum: 200 }).then((res) => {
        setProList(res.data.data);
      });
    });
  };

  const columns = [
    {
      title: '序号',
      width: 100,
      fixed: 'left',
      render: (text, record, index) => <span>{(current - 1) * pageSize + index + 1}</span>
    },
    { title: '名称', width: 260, fixed: 'left', dataIndex: 'proname' },
    {
      title: '分类',
      width: 100,
      dataIndex: 'category',
      filters: categoryList /* 分类过滤数组 */,
      onFilter: (value, record) => record.category.indexOf(value) !== -1 /* 返回匹配项*/
    },
    { title: '品牌', width: 100, dataIndex: 'brand' },
    {
      title: '图片',
      width: 200,
      dataIndex: 'img1',
      render: (text) => <Image src={text} width={80} height={80} />
    },
    {
      title: '原价',
      width: 100,
      dataIndex: 'originprice',
      sorter: (a, b) => a.originprice - b.originprice /* 按照价格排序 */
    },
    { title: '折扣', width: 100, dataIndex: 'discount' },
    {
      title: '销量',
      width: 100,
      dataIndex: 'sales',
      sorter: (a, b) => a.sales - b.sales /* 按照销量排序 */
    },
    {
      title: '库存',
      width: 100,
      dataIndex: 'stock',
      sorter: (a, b) => a.stock - b.stock /* 按照库存排序 */
    },
    {
      title: '上架状态',
      width: 110,
      fixed: 'right',
      dataIndex: 'issale',
      render: (text) => <Switch checked={text} />
    },
    {
      title: '是否推荐',
      width: 110,
      fixed: 'right',
      dataIndex: 'isrecommend',
      render: (text, record) => (
        <Switch
          checked={text}
          onChange={() => {
            changeRecommendFlag(record.proid, text); // 改变推荐状态
          }}
        />
      )
    },
    {
      title: '是否秒杀',
      width: 100,
      fixed: 'right',
      dataIndex: 'isseckill',
      render: (text, record) => (
        <Switch
          checked={text}
          onChange={() => {
            changeSeckillFlag(record.proid, text); // 改变秒杀状态
          }}
        />
      )
    },
    {
      title: '操作',
      width: 180,
      fixed: 'right',
      render: (text, record, index) => {
        return (
          <Space>
            <Tooltip title='功能正在开发中'>
              <Button type='dashed'>编辑</Button>
            </Tooltip>
            <Popconfirm title='确定删除吗?' onConfirm={() => {}} okText='确定' cancelText='取消'>
              <Button type='danger'>删除</Button>
            </Popconfirm>
          </Space>
        );
      }
    }
  ];

  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const changePage = (page, pageSize) => {
    setCurrent(page);
    setPageSize(pageSize);
  };

  return (
    <div>
      <Table
        columns={columns}
        dataSource={proList}
        rowKey={(record) => record.proid}
        scroll={{ x: 1500, y: 700 }}
        pagination={{
          current: current,
          pageSize: pageSize,
          position: ['topRight', 'bottomLeft'],
          hideOnSinglePage: true,
          pageSizeOptions: [10, 50, 100, 150],
          showQuickJumper: true,
          onChange: changePage
        }}
      ></Table>
    </div>
  );
}

export default Index;
